<template>
  <el-dialog
    :visible="dialogVisible"
    :close-on-click-modal="false"
    :title="elDialogTitle"
    width="500px"
    top="5%"
    :before-close="cancelClose"
  >
    <el-form ref="addform" :model="addform" :rules="rules" label-width="90px">
      <el-form-item label="指标名称" prop="indexName">
        <el-input v-model="addform.indexName" clearable></el-input>
      </el-form-item>
      <el-form-item label="指标编码" prop="indexCode">
        <el-input v-model="addform.indexCode" clearable></el-input>
      </el-form-item>
      <el-form-item label="来源表" prop="tableFrom">
        <el-input v-model="addform.tableFrom" clearable></el-input>
      </el-form-item>
      <el-form-item label="公式" prop="formula">
        <el-input v-model="addform.formula" clearable></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input
          type="describe"
          v-model="addform.describe"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item label="是否填报" prop="isFill">
        <el-radio-group v-model="addform.isFill" @change="changIsFill">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="填报人"
        prop="userAccount"
        v-if="addform.isFill === '1'"
      >
        <el-select
          placeholder="请搜索选择人员"
          v-model="addform.userAccount"
          filterable
          remote
          :remote-method="remoteSearch"
          @change="userChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label + '---' + item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="填报地址"
        prop="fillUrl"
        v-if="addform.isFill === '1'"
      >
        <el-input v-model="addform.fillUrl" clearable></el-input>
      </el-form-item>

      <el-form-item label="更新频率" prop="updateTime">
        <el-input v-model="addform.updateTime" clearable></el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="cancelClose">取 消</el-button>
      <el-button type="primary" @click="sureAdd">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { add, edit } from '@/apis/indexManagement.js'
import { findUserByOrgId } from '@/apis/meetingConfiguration.js'

export default {
  data() {
    return {
      elDialogTitle: '新增指标',
      addform: {
        indexName: '',
        indexCode: '',
        tableFrom: '',
        isFill: '1',
        formula: '',
        describe: '',
        userName: '',
        fillUrl: '',
        userAccount: '',
        updateTime: ''
      },
      dialogVisible: false,
      options: [], // 初始选项为空
      loadingUser: false, // 是否正在加载数据
      searchQuery: '', // 搜索查询字符串
      rules: {
        indexName: [
          { required: true, message: '请填写指标名称！', trigger: 'blur' }
        ],
        indexCode: [
          { required: true, message: '请填写指标编码！', trigger: 'blur' }
        ],
        isFill: [{ required: true, message: '请选择是否填报！' }],
        userAccount: [{ required: true, message: '请搜索选择填报人！' }],
        fillUrl: [{ required: true, message: '请填写填报地址！' }],
        updateTime: [{ required: true, message: '请填写更新频率！' }]
      }
    }
  },

  mounted() {},
  methods: {
    remoteSearch(query) {
      if (query !== '') {
        this.searchQuery = query
        this.fetchData()
      } else {
        this.options = [] // 清空选项
      }
    },
    fetchData() {
      if (this.loadingUser) return // 避免重复请求
      this.loadingUser = true
      findUserByOrgId({ userName: this.searchQuery })
        .then((response) => {
          this.options = response.data.map((item) => ({
            value: item.account,
            label: item.fullName
          }))
          this.loadingUser = false
        })
        .catch((error) => {
          this.loadingUser = false
        })
    },
    changIsFill(v) {
      if (v != '1') {
        this.addform.userName = ''
        this.addform.userAccount = ''
        this.addform.fillUrl = ''
      }
    },
    userChange(val) {
      this.options.map((item) => {
        if (item.value === val) {
          this.addform.userName = item.label
        }
      })
    },
    cancelClose() {
      this.dialogVisible = false
      this.addform = this.$options.data().addform
      this.$refs.addform.resetFields()
    },
    // 成功失败日志
    logSuccessOrError(type) {
      this.addLog(
        0,
        this.elDialogTitle == '新增指标' ? 'add' : 'edit',
        this.addform,
        type
      )
    },

    sureAdd() {
      this.$refs.addform.validate(async (valid) => {
        if (valid) {
          let res = {}
          if (this.elDialogTitle == '新增指标') {
            res = await add(this.addform)
          } else {
            res = await edit(this.addform)
          }
          if (res.code == 200) {
            this.cancelClose()
            this.$parent.search()
            // this.logSuccessOrError('success')
            this.$message.success(`${this.elDialogTitle}成功！`)
          } else {
            // this.logSuccessOrError('error')
            this.$message.error(res.data || `${this.elDialogTitle}失败！`)
          }
        } else {
          this.$message.error('请按要求填写表单！')
          return false
        }
      })
    },

    show(row) {
      console.log(row)
      if (row && row.id) {
        Object.assign(this.addform, row)
        this.changIsFill(this.addform.isFill)
      }
      this.elDialogTitle = row.id ? '编辑指标' : '新增指标'
      this.dialogVisible = true
    }
  }
}
</script>

<style></style>
